/**
 * @Author: jipeng.Li
 * @Date: 2021-04-20 14:00:21
 * @LastEditors: jipeng.Li
 * @LastEditTime: 2021-04-20 18:36:21
 * @Description: 油卡入口列表
 */

import React from 'react';
import { View, StyleSheet, Text, TouchableOpacity, Image } from 'react-native';
import { mainBgColorWhite, px2dp, fontColorCoffee, splitLineColorLightGray } from '../../../../common/styles';
import { iconRightCoffee } from '../../../../image';

const WriteOffListItem = (props) => {
  const {
    lineText = {},
    btnClick
  } = props;

  return (
    <View style={styles.writeOffListItem}>
      <View style={{ flexWrap: 'wrap', flexDirection: 'row', paddingHorizontal: px2dp(24), paddingVertical: px2dp(20) }}>
        {
          Object.keys(lineText).map((value, index) => {
            return (
              <View style={[styles.itemLine, { width: index % 2 === 0 ? '45%' : '55%' }]} key={`itemLineText${index}`}>
                <Text style={styles.itemText}>
                  <Text>{`${value}: `}</Text>
                  {lineText[value]}
                </Text>
              </View>
            );
          })
        }
      </View>

      <View style={styles.itemBottom}>
        <TouchableOpacity
          onPress={() => btnClick && btnClick()}
          style={{ flexDirection: 'row', alignItems: 'center' }}
        >
          <Text style={{ color: fontColorCoffee }}>去核销</Text>
          <Image
            source={iconRightCoffee}
            style={{ width: px2dp(24), height: px2dp(24) }}
          />
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  writeOffListItem: {
    backgroundColor: mainBgColorWhite,
    height: px2dp(273),
    borderRadius: px2dp(16),
    justifyContent: 'space-between',
  },
  itemLine: {
    height: px2dp(16 + 37),
    justifyContent: 'space-between',

  },
  itemText: {
    flex: 1,
    lineHeight: px2dp(16 + 37),
    color: '#999793',
    fontSize: px2dp(26),
  },
  itemTextKey: {
    color: '#999793',
    fontSize: px2dp(26),
  },
  itemBottom: {
    height: px2dp(65),
    borderTopWidth: px2dp(1),
    borderTopColor: splitLineColorLightGray,
    alignItems: 'center',
    justifyContent: 'center'
  }
});

export default WriteOffListItem;
